<template>
  <div>
    <div
      id="testLine"
      ref="testLine"
      style="height: calc(45vh);width: 100%;"
    />
  </div>
</template>

<script>
import shaoxingMap from '@/assets/map/ShaoXing.json';

var cityJson = [
  {
    name: '越城区',
    value: 1000,
    itemStyle: {
      color: 'green'
    }
  },
  {
    name: '上虞区',
    value: 20,
    itemStyle: {
      color: 'green'
    }
  },
  {
    name: '柯桥区',
    value: 30,
    itemStyle: {
      color: 'yellow'
    }
  },
  {
    name: '诸暨市',
    value: 50,
    itemStyle: {
      color: 'orange'
    }
  },
  {
    name: '嵊州市',
    value: 60000,
    itemStyle: {
      color: '#016fdd'
    }
  },
  {
    name: '新昌县',
    value: 70,
    itemStyle: {
      color: 'red'
    }
  }

];
export default {

  data() {
    return {
      yMax: 0,
      myChart: null,
      option: {
        title: {
          text: '绍兴市区域预警地图',
          textStyle: {
            color: '#fff',
            fontWeight: 'bolder'
          },
          left: 'left'
        },
        tooltip: {
          show: true,
          formatter: (params) => {
            return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
            <div class='tips' style="padding:0 12px;color:#fff">
                <h1 style='font-size:16px;color:#fff'>${params.name}</h1>
                <p style="font-size:14px;color:fff;font-weight:bolder"><span >该区域假劣药数量已达：</span>${params.value}个,<span style='color:red'>请引起重视</span></p>
            </div>`;
          },
          borderColor: '#998484',
          borderWidth: 1,
          padding: [0, 0],
          backgroundColor: '#1B212B',
          borderRadius: 0
        },

        series: [
          {
            name: '绍兴',
            type: 'map3D',
            map: 'SX',
            data: cityJson,
            zoom: 100,
            light: {
              main: {
                color: '#fff',
                intensity: 1.2,
                shadow: false,

                alpha: 55,
                beta: 10
              },
              ambient: {
                color: '#fff',
                intensity: 0.5
              }
            },
            viewControl: {
              projection: 'perspective',
              autoRotate: true,
              autoRotateDirection: 'cw',
              autoRotateSpeed: 2,
              autoRotateAfterStill: 3,
              damping: 0,
              rotateSensitivity: 1,
              panSensitivity: 1,
              panMouseButton: 'left',
              rotateMouseButton: 'left',
              distance: 82,
              minDistance: 40,
              maxDistance: 400,
              alpha: 40,
              beta: 15,
              minAlpha: -36000000,
              maxAlpha: 3600000,
              minBeta: -3600000,
              maxBeta: 36000000,
              center: [0, 0, 0],
              animation: true,
              animationDurationUpdate: 1000,
              animationEasingUpdate: 'cubicInOut'
            },
            regionHeight: 3,
            boxWidth: 70,

            boxDepth: 60,
            top: '-15%',

            label: {
              show: true,
              position: ['50%', '50%'],
              formatter: (params) => {
                return params.name + '\n' + params.value;
              },
              textStyle: {
                color: 'rgba(255,255,255,0.65)',
                fontSize: 10,
                opacity: 1,
                backgroundColor: '#1B212B ',
                borderColor: '#998484',
                borderWidth: 1,
                position: 'insideTop',
                padding: [6, 8],
                borderRadius: 5,
                distanca: 20
              },
              emphasis: {
                borderWidth: 1,
                borderColor: '#fff',
                areaColor: 'rgb(179, 167, 104)',
                show: true
              }

            },
            itemStyle: {
              opacity: 1,
              borderWidth: 1,
              borderColor: '#808080',
              color: '#ffffff',
              emphasis: {
                borderWidth: 1.6,
                borderColor: '#95FFFF',
                color: '#0058B8',
                textStyle: {
                }
              }
            }
          }],
        dataRange: {
          x: 'right',
          y: 'top',
          splitList: [
            // { start: 1500 },
            // { start: 900, end: 1500 },
            { start: 310, end: 1000 },
            { start: 200, end: 300 },
            { start: 10, end: 200, label: '10 到 200（假药数量）' },
            { start: 5, end: 5, label: '5（假药数量）', color: '#fff' },
            { end: 10 }
          ],
          color: ['#eee', '#949fb1', '#f3ce85'],
          textStyle: {
            color: '#fff'
          }
        }

      }
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.testLine);
    this.initChart();
  },
  methods: {
    initChart() {
      const { myChart, option } = this;
      this.$echarts.registerMap('SX', { geoJSON: shaoxingMap });
      myChart.setOption(option);
    }
  }
};
</script>
